<template>
<div>
<div v-if="value" v-viewer="{movable: false}" class="demo-upload-list" :style="{width: width+'px', height: height + 'px'}">
  <img :src="url"></src>
  <div class="demo-upload-list-cover">
      <Icon type="ios-eye-outline" @click.native="handleView"></Icon>
      <Icon type="ios-trash-outline" v-if="showDelete" @click.native="handleRemove"></Icon>
  </div>
</div>

</div>
</template>
<script>
export default {
  props: {
    showDelete: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '图片预览'
    },
    value: {
      type: String,
      default: ''
    },
    width: {
      type: [Number, String],
      default: 60
    },
    height: {
      type: [Number, String],
      default: 60
    }
  },
  data () {
    return {
      visible: false,
      images: [
      ]
    }
  },
  methods: {
    handleView () {
      this.visible = true
      const viewer = this.$el.querySelector('.demo-upload-list').$viewer
      viewer.show()
    },
    handleRemove () {
      this.$emit('input', '')
    }
  },
  computed: {
    url () {
      if (this.value.indexOf('http') !== -1) {
        return this.value
      } else {
        return process.env.VUE_APP_IMA_BASE_URL + this.value
      }
    }
  }
}
</script>

<style scoped>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
